<template>
  <div>
    <div v-if="device==='desktop'" class="dswd-aboutus-first">
      <div class="first-wrap">
        <div class="aboutus-first-text">
          <div class="aboutus-en-title">About Us</div>
          <div class="aboutus-title">关于我们</div>
          <div class="title-divide" />
          <div class="aboutus-sub-title" @click="scrollToLocation('dswd-aboutus-second')">公司介绍</div>
          <div class="aboutus-sub-title" @click="scrollToLocation('dswd-aboutus-three')">新闻动态</div>
        </div>
        <div class="aboutus-first-img">
          <img src="../../assets/image/aboutus/first/aboutus.png" alt="aboutus">
        </div>
      </div>
      <div class="dividing-line" />
    </div>
    <div v-if="device==='ipad'" class="dswd-p-aboutus-first">
      <div class="first-wrap">
        <div class="aboutus-first-text">
          <div class="aboutus-en-title">About Us</div>
          <div class="aboutus-title">关于我们</div>
          <div class="title-divide" />
          <div class="aboutus-sub-title" @click="scrollToLocation('dswd-aboutus-second')">公司介绍</div>
          <div class="aboutus-sub-title" @click="scrollToLocation('dswd-aboutus-three')">新闻动态</div>
        </div>
        <div class="aboutus-first-img">
          <img src="../../assets/image/aboutus/first/aboutus.png" alt="aboutus">
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device==='mobile'" class="dswd-m-aboutus-first">
      <div class="first-wrap">
        <div class="aboutus-first-text">
          <div class="aboutus-en-title">About Us</div>
          <div class="aboutus-title">关于我们</div>
          <div class="title-divide" />
          <div class="aboutus-sub-title" @click="scrollToLocation('dswd-aboutus-second')">公司介绍</div>
          <div class="aboutus-sub-title" @click="scrollToLocation('dswd-aboutus-three')">新闻动态</div>
        </div>
        <div class="aboutus-first-img">
          <img src="../../assets/image/aboutus/first/aboutus.png" alt="aboutus">
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  mounted() {},
  methods: {
    scrollToLocation(refName) {
      this.$nextTick(() => {
        const offsetTop = document.getElementById(refName).offsetTop - 100
        const ScrollTop = (number = 0, time) => {
          if (!time) {
            document.body.scrollTop = document.getElementById(
              'router-content'
            ).scrollTop = number
            return number
          }
          const spacingTime = 20 // 设置循环的间隔时间  值越小消耗性能越高
          let spacingInex = time / spacingTime // 计算循环的次数
          let nowTop =
            document.body.scrollTop +
            document.getElementById('router-content').scrollTop // 获取当前滚动条位置
          const everTop = (number - nowTop) / spacingInex // 计算每次滑动的距离
          const scrollTimer = setInterval(() => {
            if (spacingInex > 0) {
              spacingInex--
              ScrollTop((nowTop += everTop))
            } else {
              clearInterval(scrollTimer) // 清除计时器
            }
          }, spacingTime)
        }
        ScrollTop(offsetTop, 200)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/aboutus/first.scss";
</style>
